<template>
  <el-dialog :visible.sync="visible"
             :close-on-click-modal="false"
             :before-close="handleClose"
             title="选择data-v组件"
             width="60%">
    <div class="data-v-list">
      <el-divider/>
      <div class="com-big" v-for="item in datavList" >
         <div>{{item.label}}</div>
         <div :class="['com-container', {'selected': selectValue === com.value} ]" v-for="com in item.list"
            @click="select(com)">
            <component class="com-detail" :is="com.value" :config="com.config"></component>
            <div class="com-title">{{com.label}}</div>
         </div>
        <div class="clear"/>
        <el-divider/>
      </div>

    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "datav-select",
  data(){
    return{
      activeName: 'border',
      datavList: [
        {
          label: '杂项',
          list: [
            {label: '水位图', value: 'dv-water-level-pond',config:{
               data: [66],
               shape: 'rect',
               colors: ['#00BAFF', '#3DE7C9'],
               waveNum: 3,
               waveHeight: 40,
               waveOpacity: 0.4,
               formatter: '{value}%'
              }},
            {label: 'loading', value: 'dv-loading'},
            {label: '进度池', value: 'dv-percent-pond',config:{
                value: 66,
                colors: ['#3DE7C9', '#00BAFF'],
                borderWidth: 3,
                borderGap: 3,
                lineDash: [5, 1],
                textColor: '#fff',
                borderRadius: 5,
                localGradient: false,
                formatter: '{value}%'
            }},
            {label: '数字翻牌器', value: 'dv-digital-flop',config:{
              number: [100],
              content: '{nt}个',
                toFixed: 0,
                textAlign: 'center',
                rowGap: 0,
                style: {
                  fontSize: 30,
                  fill: '#3de7c9'
                },
                formatter: undefined,
                animationCurve: 'easeOutCubic',
                animationFrame: 50
              }},
          ]
        },
        {
          label: '边框',
          list: [
            {label: '边框1', value: 'dv-border-box-1',hasColor: true},
            {label: '边框2', value: 'dv-border-box-2'},
            {label: '边框3', value: 'dv-border-box-3'},
            {label: '边框4', value: 'dv-border-box-4'},
            {label: '边框5', value: 'dv-border-box-5'},
            {label: '边框6', value: 'dv-border-box-6'},
            {label: '边框7', value: 'dv-border-box-7'},
            {label: '边框8', value: 'dv-border-box-8'},
            {label: '边框9', value: 'dv-border-box-9'},
            {label: '边框10', value: 'dv-border-box-10'},
            {label: '边框11', value: 'dv-border-box-11'},
            {label: '边框12', value: 'dv-border-box-12'},
            {label: '边框13', value: 'dv-border-box-13'},
          ]
        },{
          label: '装饰',
          list: [
            {label: '装饰1', value: 'dv-decoration-1'},
            {label: '装饰2', value: 'dv-decoration-2'},
            {label: '装饰3', value: 'dv-decoration-3'},
            {label: '装饰4', value: 'dv-decoration-4'},
            {label: '装饰5', value: 'dv-decoration-5'},
            {label: '装饰6', value: 'dv-decoration-6'},
            {label: '装饰7', value: 'dv-decoration-7'},
            {label: '装饰8', value: 'dv-decoration-8'},
            {label: '装饰9', value: 'dv-decoration-9'},
            {label: '装饰10', value: 'dv-decoration-10'},
            {label: '装饰11', value: 'dv-decoration-11'},
            {label: '装饰12', value: 'dv-decoration-12'},
          ]
        }
      ]
    }
  },
  props: {
    visible: Boolean,
    selectValue: String
  },
  methods:{
    handleClose () {
      this.setVisible(false);
    },
    setVisible (val) {
      this.$emit('update:visible', val);
    },
    select ( item ){
      console.log('点击了datav组件',item)
      this.$emit('select',item)
      this.setVisible(false)
    }
  }
}
</script>

<style lang="scss" >
.tabs{
  color: white;
  .tabs-pane{
    padding: 0 20px;
  }
}
.data-v-list{
  min-height: 400px;
  width: 100%;
  .com-big{
    width: 100%;
    height: 100%;
  }
  .com-container{
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px 20px;
    padding: 5px;
    .com-detail{
      width: 100px;
      height: 80px;
    }
    .com-title{
      text-align: center;
      //color: white;
      font-size: 20px;
      font-weight: bold;
    }
    &:hover{
      cursor: pointer;
      background-color: rgba(78,67,213,0.8);
    }
  }
  .selected{
    cursor: pointer;
    background-color: rgba(78,67,213,0.8);
  }
}
.clear{
  clear: both;
}


</style>